<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="vtc" uri="/vtc-core-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
<head>
<title>Report Generation</title>


</head>
<body>
	<link rel="stylesheet" type="text/css"
		href="<s:url value="/css/jquery.multiselect.css"/>" />
	<link rel="stylesheet" type="text/css"
		href="<s:url value="/css/jquery.ui/jquery-ui-1.8.14.custom.css"/>" />
	<script type="text/javascript"
		src="<s:url value="/js/jquery-ui-1.8.14.custom.min.js"/>"></script>
	<script type="text/javascript"
		src="<s:url value="/js/jquery.multiselect.js"/>"></script>

	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							//$('#planningExerciseList').multiselect({multiple:false});
							$(".multiSelect").multiselect();
							$('#dd_campus').multiselect();
							$('#deptList').multiselect();

							$("#dd_campus")
									.multiselect("widget")
									.prev('button')
									.blur(
											function() {
												//get checked 
												var checkedValues = $(
														"#dd_campus")
														.multiselect(
																"getChecked")
														.map(function() {
															return this.value;
														}).get();
												var len = checkedValues.length;
												//console.log('len'+len);		
												//if checked > 0 send ajax req to server 
												if (len > 0) {
													var v = checkedValues
															.join('@');
													$
															.ajax({
																url : "reporting!ajaxDept.action?campuses="
																		+ v
																		+ '&t='
																		+ new Date()
																				.getTime(),
																cache : true,
																dataType : "json",
																async : false,
																success : function(
																		data) {
																	//console.log(data);
																	var deptSelect = $('#deptList');
																	var dlen = data.length;

																	for (i = 0; i < dlen; i++) {
																		var opt = $("<option></option>");
																		var o = data[i];
																		opt
																				.attr(
																						'value',
																						o.code);
																		opt
																				.text(o.desc);
																		deptSelect
																				.append(opt);
																	}

																	deptSelect
																			.multiselect('refresh');

																	// $('#deptList').multiselect("open");

																},
																error : function(
																		data) {
																	$(
																			"#errorMsgSpan")
																			.html(
																					data);
																}
															});
												} else {
													var deptSelect = $('#deptList');
													deptSelect.children()
															.remove();
													deptSelect
															.multiselect('refresh');
												}
												//console.log(array_of_checked_values);

											});

						})

		function generateExcelReport() {
			$("#mainForm").attr("action", "b1!getExcelReport.action");
			$("#mainForm").submit();
		}

		function generatePDFReport() {
			$("#mainForm").attr("action", "b1!getPDFReport.action");
			$("#mainForm").submit();
		}
	</script>

	<form id="mainForm" action="b1!getPDFReport.action" method="post">
		<div class="content">
			<!-- InstanceBeginEditable name="content" -->
			<script>
				var menuSelected = "report";
			</script>
			<div class="pageTitle">Report Generation</div>
			<div class="form2">
				<table cellspacing="0" cellpadding="0" border="0">
					<tbody>
						<tr>
							<td class="sep"><img style="width: 400px;"
								src="../images/spacer.gif">
							</td>
							<td class="sep sep2"><img src="../images/spacer.gif">
							</td>
						</tr>
						<%@include file="common_dropdown.jsp"%>

						<tr>
							<td style="padding: 5px" colspan="2"><div class="form1">
									<div class="pageTitle2">Report Selection Criteria - B1</div>
									<table cellspacing="0" cellpadding="0" border="0" style=""
										id="rpt_criteria_1">
										<tbody>
											<tr>
												<td class="sep"><img style="width: 200px;"
													src="../images/spacer.gif">
												</td>
												<td class="sep"><img style="width: 180px;"
													src="../images/spacer.gif">
												</td>
												<td class="sep"><img style="width: 180px;"
													src="../images/spacer.gif">
												</td>
												<td class="sep sep2"><img src="../images/spacer.gif">
												</td>
											</tr>
											<tr>
												<td><label class="fLabel">Planning Exercise</label>
													<div>
														<div class="fField">
															<select name="planningExercise" id="planningExerciseList">
																<s:iterator value="planningExerciseList" var="o">
																	<option value="${o.planYear}">${o.planYear}</option>
																</s:iterator>
															</select>
														</div>
													</div>
												</td>
												<td><label class="fLabel">Plan Name</label>
													<div>
														<div class="fField">

															<select name="planName" id="planNameSelect">
																<option value="">--Select--</option>
															</select>

														</div>
													</div>
												</td>

												<td><label class="fLabel">Archive Image</label>
													<div>
														<div class="fField">
															<select name="archiveImage" id="archiveImage">
																<option value="">--Select--</option>
															</select>
														</div>
													</div>
												</td>

											</tr>

											<tr>



												<td><label class="fLabel">Member Institution</label>
													<div>
														<div class="fField">
															<select name="memberInstitutionList"
																id="memberInstitution" class="multiSelect">
																<option value="below is static">below is static</option>
																<option value="IVE / HKDI">IVE / HKDI</option>
																<option value="SBI">SBI</option>
																<option value="YC">YC</option>
																<option value="PRO-ACT">PRO-ACT</option>
																<option value="MSTI">MSTI</option>
																<option value="OTHERS">OTHERS</option>
															</select>
														</div>
													</div>
												</td>

												<td><label class="fLabel">Campus</label>
													<div>
														<div class="fField">
															<select name="campus" id="dd_campus">
																<s:iterator value="campusList" var="o">
																	<option value="${o.desc }">${o.desc}</option>
																</s:iterator>
															</select>
														</div>
													</div>
												</td>
												<td><label class="fLabel">Offering Unit</label>
													<div>
														<div class="fField">
															<select size="5" name="offeringUnitList"
																id="offeringUnitList" multiple="multiple"
																class="multiSelect" style="display: none;">
																<option selected="selected" value="option1">Option
																	1</option>
															</select>
														</div>
													</div>
												</td>

												<td><label class="fLabel">Operating Unit</label>
													<div>
														<div class="fField">
															<select size="5" name="operatingUnitList" id="deptList"
																style="display: none;">
															</select>
														</div>
													</div></td>

											</tr>

											<tr>
												<td><label class="fLabel">Discipline</label>
													<div>
														<div class="fField">
															<select size="5" name="disciplineList"
																id="disciplineList" multiple="multiple"
																class="multiSelect" style="display: none;">
																<s:iterator value="paramService.disciplineList" var="o">
																	<option selected="selected" value="${o.desc }">${o.desc}</option>
																</s:iterator>
															</select>
														</div>
													</div>
												</td>

												<td><label class="fLabel">Study Mode</label>
													<div>
														<div class="fField">
															<select size="3" name="studyModeList" id="studyModeList"
																multiple="multiple" class="multiSelect"
																style="display: none;">
																<s:iterator value="paramService.studyModeList" var="o">
																	<option selected="selected" value="${o.desc }">${o.desc}</option>
																</s:iterator>
															</select>
														</div>
													</div>
												</td>

												<td><label class="fLabel">Funding Mode</label>
													<div>
														<div class="fField">
															<select size="5" name="fundingModeList"
																id="fundingModeList" multiple="multiple"
																class="multiSelect" style="display: none;">
																<s:iterator value="paramService.fundingModeList" var="o">
																	<option value="${o.desc }">${o.desc}</option>
																</s:iterator>
															</select>
														</div>
													</div>
												</td>

											</tr>


											<tr>
												<td><label class="fLabel">Level of Study</label>
													<div>
														<div class="fField">
															<select size="5" name="levelOfStudyList"
																id="fundingModeList" multiple="multiple"
																class="multiSelect" style="display: none;">
																<s:iterator value="paramService.levelOfStudyList"
																	var="o">
																	<option value="${o.desc }">${o.desc}</option>
																</s:iterator>
															</select>
														</div>
													</div>
												</td>

												<td><label class="fLabel">Programme Type</label>
													<div>
														<div class="fField">
															<select size="5" name="programmeTypeList"
																id="programmeTypeList" multiple="multiple"
																class="multiSelect" style="display: none;">
																<s:iterator value="paramService.programmeTypeList"
																	var="o">
																	<option value="${o.desc }">${o.desc}</option>
																</s:iterator>
															</select>
														</div>
													</div>
												</td>
												<td colspan="2"><label class="fLabel">Programme
														Board</label>
													<div>
														<div class="fField">
															<select size="5" name="programmeBoardList"
																id="programmeBoardList" multiple="multiple"
																class="multiSelect" style="display: none;">
																<s:iterator value="paramService.programmeBoardList"
																	var="o">
																	<option value="${o.desc }">${o.desc}</option>
																</s:iterator>
															</select>
														</div>
													</div>
												</td>
											</tr>
											<tr>
												<td><label class="fLabel">Adward</label>
													<div>
														<div class="fField">
															<select size="5" name="adwardList" id="adwardList"
																multiple="multiple" class="multiSelect"
																style="display: none;">
																<s:iterator value="paramService.awardList" var="o">
																	<option value="${o.desc }">${o.desc}</option>
																</s:iterator>
															</select>
														</div>
													</div>
												</td>
												<td><label class="fLabel">Show Detail</label>
													<div>
														<div class="fField">
															<select size="5" name="showDetailList"
																id="showDetailList" multiple="multiple"
																class="multiSelect" style="display: none;">
																<option value="option1">[New and Prog. / Total]</option>
																<option value="option2">[Default New and Prog.]</option>
															</select>
														</div>
													</div>
												</td>
												<td colspan="2"><label class="fLabel">Show
														Curriculum Hour</label>
													<div>
														<div class="fField">
															<input type="checkbox" name="showCurriculumHour"
																checked="checked" />


														</div>
													</div>
												</td>
											</tr>
											<tr>
												<td><label class="fLabel">Show Projected
														Enrolment Figure </label>
													<div>
														<div class="fField">
															<input type="checkbox"
																name="showProjectedEnrolmentFigure" />

														</div>
													</div>
												</td>

												<td><label class="fLabel">Main Stream</label>
													<div>
														<div class="fField">
															<input type="radio" name="mainStream" value="All"/>All <input
																type="radio" name="mainStream" value="Y"/>Y <input type="radio"
																name="mainStream" value="N"/>N
														</div>
													</div>
												</td>

												<td colspan="2"><label class="fLabel">Report
														Summary</label>
													<div>
														<div class="fField">
															<select size="5" name="reportSummaryList"
																id="reportSummaryList" multiple="multiple"
																class="multiSelect" style="display: none;">
																<option value="Campus">Campus</option>
																<option value="Campus / Disc">Campus / Disc</option>
																<option value="Disc">Disc</option>
																<option value="Mode of Study">Mode of Study</option>
																<option value="Level">Level</option>
																<option value="Campus / Mode of Study/ Level">Campus
																	/ Mode of Study / Level</option>
																<option
																	value="Campus / Dept / Mode of
																	Study / Level">Campus
																	/ Dept / Mode of Study / Level</option>
																<option
																	value="Campus / Dept / Mode of
																	Study / Level">Campus
																	/ Dept / Mode of Study / Prog. Type</option>
																<option
																	value="Offering Unit / Mode of
																	Study / Level">Offering
																	Unit / Mode of Study / Level</option>
															</select>
														</div>
													</div>
												</td>
											</tr>
										</tbody>
									</table>
								</div> <script>
									function attrOnChange(thisObj) {
										/*
										var _value = CE.selected(thisObj, "value");
										if(_value != ''){
											for(var i=0; i&lt;thisObj.options.length; i++){
												if(document.getElementById('rpt_criteria_' + i)){
													document.getElementById('rpt_criteria_' + i).style.display = 'none';
												}
											}
											document.getElementById('rpt_criteria_' + _value).style.display = '';			 
										}*/
									}

									attrOnChange(document
											.getElementById('aaaa'));
								</script>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="btnSet btnSetTypeA">
					<div class="left">
						<div class="button">
							<div class="left">
								<div class="right">
									<input type="button" value="Submit" name="" id=""
										class="inputButton">
								</div>
							</div>
						</div>
						<div class="button">
							<div class="left">
								<div class="right">
									<input type="button" value="Clear" name="" id=""
										class="inputButton">
								</div>
							</div>
						</div>

						<div class="button">
							<div class="left">
								<div class="right">
									<input type="button" value="Generate Excel Report" name=""
										id="" class="inputButton" onclick="generateExcelReport();">
								</div>
							</div>
						</div>

						<div class="button">
							<div class="left">
								<div class="right">
									<input type="button" value="Generate PDF Report" name="" id=""
										class="inputButton" onclick="generatePDFReport();">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- InstanceEndEditable -->
		</div>

	</form>

</body>
</html>
